<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
	<th:block th:include="include :: header('房屋详情页面')" />
</head>
<body>
    <div class="main-content">
        <div class="ibox float-e-margins">
            <div class="ibox-title  back-change">
                <h5>房源详细信息</h5>
            </div>
            <div class="ibox-content">
                <div class="row">
                    <div class="col-sm-6">
                        <div class="ibox float-e-margins">
                            <div class="ibox-content ">
                                <div class="carousel slide" id="carousel2">
                                    <ol class="carousel-indicators" id="imgSwitch">
                                    </ol>
                                    <div class="carousel-inner" id="imgGrid">
                                    </div>
                                    <a data-slide="prev" href="carousel.html#carousel2" class="left carousel-control">
                                        <span class="icon-prev"></span>
                                    </a>
                                    <a data-slide="next" href="carousel.html#carousel2" class="right carousel-control">
                                        <span class="icon-next"></span>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <h1><strong th:text="${house.name}"></strong></h1>
                        <h2 id="tags"></h2>
                        <p></p>
                        <h2><strong>面积：<i th:text="${house.area}"></i>  ㎡</strong></h2>
                        <h2><strong>类型：<i th:if="${house.type == 1}">整租</i><i th:if="${house.type == 2}">合租</i></strong></h2>
                        <h2><strong>价格：¥ <i th:text="${house.price}"></i> /月</strong></h2>
                        <h2><strong>位置：<i th:text="${house.location}"></i></strong></h2>
                        <h3>最后更新日期：<i th:text="${#dates.format(house.updateDate, 'yyyy-MM-dd')}"></i></h3>
                    </div>
                    <div class="col-sm-10">
                        <div class="tabs-container">
                            <ul class="nav nav-tabs">
                                <li class="active"><a data-toggle="tab" href="#tab-1" aria-expanded="true"> 房屋简介</a>
                                </li>
                                <li class=""><a data-toggle="tab" href="#tab-2" aria-expanded="false"> 租户信息</a>
                                </li>
                            </ul>
                            <div class="tab-content">
                                <div id="tab-1" class="tab-pane active">
                                    <div class="panel-body">
                                        <strong>简介:</strong>
                                        <p th:text="${house.introduce}"></p>
                                    </div>
                                </div>
                                <div id="tab-2" class="tab-pane">
                                    <div class="panel-body">
                                        <p><strong>昵称: </strong><strong th:text="${house.sysUser.userName}"></strong></p>
                                        <p><strong>手机号: </strong><strong th:text="${house.sysUser.phonenumber}"></strong></p>
                                        <p><strong>邮箱: </strong><strong th:text="${house.sysUser.email}"></strong></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
      
    <div class="row">
        <div class="col-sm-offset-5 col-sm-10">
            <button type="button" class="btn btn-sm btn-primary" onclick="submitHandler()"><i class="fa fa-check"></i>我要申请</button>&nbsp;
            <button type="button" class="btn btn-sm btn-danger" onclick="closeItem()"><i class="fa fa-reply-all"></i>关 闭 </button>
        </div>
    </div>
	<th:block th:include="include :: footer" />
	<script th:inline="javascript">
	    var prefix = ctx + "admin/house";
	    var houseInfo = [[${house}]];
        var images = [[${images}]];

	    $(function() {
            //图片初始化
            let gridStr = '';
            let switchStr = '';
            let k = 0;
            images.map(item => {
                let gridItem = '';
                let switchItem = '<li data-slide-to="'+k+'" data-target="#carousel2"></li>';
                let gridItemHead = '<div class="item">';
                if(k == 0){
                    gridItemHead = '<div class="item active">';
                    switchItem = '<li data-slide-to="'+k+'" data-target="#carousel2" class="active"></li>';
                }
                gridItem = gridItemHead +
                '<img alt="image" class="img-responsive" src="'+item.images+'"></div>';
                k++;
                gridStr += gridItem;
                switchStr += switchItem;
            });
            $('#imgGrid').append(gridStr);
            $('#imgSwitch').append(switchStr);

            //标签初始化
            let str = '';
            let j = 0;
            houseInfo.houTags.map(item => {
                let tag = ''
                if(item.prior == 1){
                    tag = ' <span class="label label-primary" style="background-color: #510080; font-size: 17px">'+item.name+'</span>'
                }else if(item.prior == 2){
                    tag = ' <span class="label label-primary" style="background-color: #ec9f12; font-size: 17px">'+item.name+'</span>'
                }else if(item.prior == 3){
                    tag = ' <span class="label label-primary" style="background-color: #008018; font-size: 17px">'+item.name+'</span>'
                }

                if((j+1)%5 == 1){
                    tag = '<p>' + tag;
                } else if((j+1)%5 == 0){
                    tag = tag + '</p>';
                }
                str += tag;
                j++;
            });
            $('#tags').append(str);
		});
	    
	    /* 申请租房-打开选择日期的弹框 */
        function submitHandler(){
            let i = '';
            $.ajax({
                url:prefix + '/ifMyhouse',
                type:'get',
                data:{houseId:houseInfo.houseId},
                dataType:'json',
                async: false,
                success: function(result) {
                    i = result;
                }
            });
            if(i == 2){
                $.modal.alertWarning("不能申请自己名下的房源");
                return;
            }
            var url = ctx + 'admin/house/goAddApply/'+ houseInfo.houseId;
            $.modal.open("填写租房参数", url);
        }
    </script>
</body>
</html>